<template>
	<view class="search-wrap fboxRow Xcenter">
		<view class="search-box fboxRow Ycenter mt32">
			<u-search :placeholder="placeholder" v-model="_keyword" :show-action="false" shape="square" bgColor="none"
			 placeholder-color="#6B707C" color="#F7F9FF" search-icon-color="#6B707C" searchIconSize="44rpx" 
			 inputStyle="font-size:28rpx"
			 @search="searchEnter" @custom="searchEnter" @change="searchChange" @clear="searchClear">
			 </u-search>
			 <view class="btn fboxRow Ycenter Xcenter font26 " @click="searchEnter">搜索</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			placeholder: {
				type: String,
				default: '请输入'
			},
			keyword:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
			}
		},
		computed:{
			_keyword:{
				get(){
					return this.keyword
				},
				set(val) {
					this.$emit('update:keyword',val)
				}
			}
		},
		methods: {
			searchEnter(){
				this.$emit('search')
			},
			searchClear(){
				this._keyword = ''
				this.$emit('search')
			},
			searchChange(e){
				this.$emit('change')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-wrap{ height: 112rpx; overflow: hidden;}
	.search-box{ width: 670rpx;height: 72rpx;background: rgba(247,249,255,0.0314);border-radius: 12rpx 12rpx 12rpx 12rpx;}
	.btn{width: 116rpx;height: 72rpx;background: var(--contentSearchTitleColor);color: var(--contentBgImageTitleColor);border-radius: 0rpx 12rpx 12rpx 0rpx;}
	
</style>
